<template>
	<view class="eventList">
		<view class="list-tab">
			<text :class="index==tabIdx?'active':''" v-for="(item,index) in tabs" :key="index"
				@click="handleSearch(item,index)">{{item.title}}</text>
		</view>
		<view class="list">
			<view class="list_tabs">
				<my-picker @change="handleOk" :list="range" placeholder="全部类型"></my-picker>
				<my-search @ok="searchOk" @blur="blur" style="width:478upx;margin-left:28upx"></my-search>
			</view>

			<scroll-view class="list_box" scroll-y="true" @scrolltolower="onscrolltolower">
				<view class="list_item" v-for="(item,index) in list" :key="index" @click="handleClick(item,index)">
					<view class="top_text">
						<text>#{{item.ereportTypeName}}</text>
						<text>{{item.title}}</text>
					</view>
					<view class="bottom_text">
						<text>{{item.ereportTime}}</text>
						<text :class="item.status==0?'n':'y'">{{item.status==0?'未处理':'已处理'}}</text>
					</view>
				</view>
				<uni-load-more iconType="auto" :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		gateway,
		postAction,
		loadCategoryData
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				queryParam: {},
				tabs: [{
					title: '全部',
					value: 0
				}, {
					title: '未处理',
					value: 1
				}, {
					title: '已处理',
					value: 2
				}, ],
				range: [],
				list: [],
				tabIdx: 0,
				status: 'more',
				pagetion: {
					total: 0,
					pageNo: 1,
				},
				url: {
					list: gateway.sysrural + '/village/sysEreportInfo/list',

				}
			}
		},
		onLoad() {
			this.getList()
			this.getCategory()
		},
		methods: {
			getCategory() {
				loadCategoryData({
					code: 'B37'
				}).then(res => {
					this.range = res.result
					// this.range.unshift({
					// 	text: '全部类型',
					// 	value: 1,
					// })
				})
			},
			getList() {
				this.pagetion.pageNo = 1
				this.list = []
				postAction(this.url.list, {
					pageNo: this.pagetion.pageNo,
					...this.queryParam
				}).then(res => {
					this.list = res.result.records
					this.pagetion.total = res.result.total
					if (this.pagetion.total <= this.list.length - 1) {
						this.status = 'noMore'
					}
				})
			},
			//tab切换
			handleSearch(item, index) {
				this.tabIdx = index
				this.queryParam.status = index == 0 ? null : (index - 1)
				this.getList()
			},
			//输入查询
			searchOk(val) {
				this.queryParam.title = val
				this.getList()
			},
			//输入查询
			blur(val) {
				this.queryParam.title = val
				this.getList()
			},
			//下拉查询
			handleOk(v) {
				this.queryParam.ereportType = v == 1 ? null : v
				this.getList()
			},
			handleClick(item, index) {
				if (item.status == 0) {
					uni.navigateTo({
						url: `/pages/eventList/detail?item=${encodeURIComponent(JSON.stringify(item))}`,
					})
				} else {
					uni.navigateTo({
						url: `/pages/eventList/process?item=${encodeURIComponent(JSON.stringify(item))}`,
					})
				}
			},
			onscrolltolower(val) {
				if (this.pagetion.pageNo * 10 < this.pagetion.total) {
					this.status = 'loading'
					setTimeout(() => {
						this.pagetion.pageNo += 1
						postAction(this.url.list, {
							pageNo: this.pagetion.pageNo,
							...this.queryParam
						}).then(res => {
							this.list.push(...res.result.records)
						})
						this.status = 'more'
					}, 1000)
				} else {
					this.status = 'noMore'
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.eventList {
		width: 100%;
		padding-top: 100upx;

		.list-tab {
			position: fixed;
			// top: 88upx;
			top: 0;
			left: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 100upx;
			background: #fff;
			z-index: 9;

			>text {
				color: '#333333';
				font-size: 28upx;

				&.active {
					color: #333333;
					font-weight: 600;
				}
			}
		}

		.list {
			width: 100%;
			padding: 28upx;

			>.list_tabs {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 28upx;

				.uni-select {
					border-radius: 40upx;
				}
			}

			>.list_box {
				height: calc(100vh - 338upx);
				overflow-y: auto;

				.list_item {
					width: 100%;
					background: #fff;
					border-radius: 16upx;
					margin-bottom: 28upx;
					padding: 28upx;

					>.top_text {
						margin-bottom: 24upx;

						>text {
							&:nth-of-type(1) {
								font-size: 28upx;
								color: #419dca;
								margin-right: 12upx;
							}

							&:nth-of-type(2) {
								font-size: 28upx;
								color: #333;
								font-weight: 600;
							}
						}
					}

					>.bottom_text {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						>text {
							font-size: 24upx;
							color: #999999;
							position: relative;

							&.n {
								&:before {
									content: '';
									position: absolute;
									left: -28upx;
									top: 50%;
									transform: translateY(-50%);
									width: 12upx;
									height: 12upx;
									border-radius: 50%;
									background: #ff5e5e;
								}
							}

							&.y {
								&:before {
									content: '';
									position: absolute;
									left: -28upx;
									top: 50%;
									transform: translateY(-50%);
									width: 12upx;
									height: 12upx;
									border-radius: 50%;
									background: #24E049;
								}
							}
						}
					}
				}
			}
		}
	}
</style>